<template>
  <div class="pagination-table-wrap">
    <!-- {{checkedCols}} -->
    <table class="pagination-table-header">
      <thead>
        <tr class="linear-gbc">
          <th v-for="(col, index) in cols" :style="{width: ctheadThWidth[index]}" :title="col.name">
            <!-- <input type="checkbox" :value="col.index" v-model="checkedCols"> -->
          {{col.name}}</th>
        </tr>
      </thead>
    </table>
    <v-scrollerPosition :scrollConHeight="scrollConHeight">
      <table class="pagination-table" ref="tablett">
        <tbody>
          <tr v-for="(data, index) in datas" ref="tr">
            <td v-for="col in cols">{{data[col.index]}}</td>
          </tr>
        </tbody>
      </table>
    </v-scrollerPosition>
    <div class="pagination-table-footer">
      <div>
        <v-select :options="options" :selectStyleObj="{height: '20px', width: '42px'}" @select="select" :defaultValue="defaultValue"></v-select>
        <span class="recordInfo">记录/页，显示第{{(currentPage-1)*rowNums+1}}至{{(currentPage-1)*rowNums+rowNums}}项记录，共{{rowTotal}}项</span>
      </div>
      <ul>
        <li @click="goto(1)" :class="{'page-num': currentPage !== 1, 'not-allowed': currentPage === 1}">首页</li>
        <li @click="goto(prevIndex)" :class="{'page-num': currentPage !== 1, 'not-allowed': currentPage === 1}">上一页</li>
        <!-- <li v-for="i in 5" class="page-num" @click="goto(i)" :class="{select: currentPage === i}">{{i}}</li> -->
        <li class="current-page">
          <input type="text" v-model.number="currentPage" readonly>
        </li>
        <li @click="goto(nextIndex)" :class="{'page-num': currentPage !== pageTotal, 'not-allowed': currentPage === pageTotal}">下一页</li>
        <li @click="goto(pageTotal)" :class="{'page-num': currentPage !== pageTotal, 'not-allowed': currentPage === pageTotal}">尾页</li>
        <li>{{'共' + pageTotal + '页'}}</li>
      </ul>
    </div>
    <div class="pagination-table-dialog" v-if="isShowLoader">
      <div class="circleGroup">
        <div class="circle delay-one"></div>
        <div class="circle delay-twos"></div>
        <div class="circle"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import scrollerPosition from '../scroller/scrollerPosition.vue';
  import select from '../form/select.vue';
  export default{
    data () {
      return {
        cols: [{
          name: '申请单号',
          index: 'DisplayNumber'
        }, {
          name: '公司',
          index: 'CompanyName'
        }, {
          name: '申请状态',
          index: 'Status'
        }, {
          name: '申请金额',
          index: 'ApproveMoney'
        }, {
          name: '创建人',
          index: 'ConsumerName'
        }],
        datas: [],
        pageTotal: 5,
        currentPage: 1,
        rowNums: 20,
        defaultValue: '20',
        rowTotal: 0,
        scrollConHeight: 200,
        theadThWidth: [],
        options: [{
          value: 20
        }, {
          value: 30
        }, {
          value: 50
        }],
        isShowLoader: false,
        checkedCols: []
      };
    },
    computed: {
      prevIndex: function () {
        if (this.currentPage > 1) {
          return this.currentPage - 1;
        }
        return this.currentPage;
      },
      nextIndex: function () {
        if (this.currentPage < this.pageTotal) {
          return this.currentPage + 1;
        }
        return this.currentPage;
      },
      ctheadThWidth: function () {
        return this.theadThWidth;
      }
    },
    methods: {
      goto: function (index) {
        this.currentPage = index;
        this.getPaginitionDatas();
      },
      getPaginitionDatas: function () {
        var self = this;
        this.isShowLoader = true;
        this.$http.post('http://localhost:3999/pageQuery', {name: 'ReportMediaBusiness', pageNum: this.currentPage, rowNums: this.rowNums, orderBy: 'Id'})
        .then(function (response) {
          let result = response.data;
          self.datas = result.datas;
          self.pageTotal = result.pageTotal;
          self.rowTotal = result.rowTotal;
          if (self.currentPage > self.pageTotal) {
            self.currentPage = self.pageTotal;
          }
          self.$nextTick(function () {
            self.scrollConHeight = self.$refs.tablett.offsetHeight;
            let tds = self.$refs.tr[0].children;
            for (let i = 0; i < tds.length; i++) {
              this.$set(self.theadThWidth, i, tds[i].offsetWidth + 'px');
            }
            self.isShowLoader = false;
          });
        })
        .catch(function (err) {
          self.isShowLoader = false;
          console.log(err);
        });
      },
      select: function (val) {
        this.rowNums = val.value;
        this.getPaginitionDatas();
      },
      exportExcel: function () {
        var self = this;
        this.isShowLoader = true;
        this.$http.post('http://localhost:3999/excel', {name: 'ReportMediaBusiness', pageNum: this.currentPage, rowNums: this.rowNums, orderBy: 'Id'})
        .then(function (response) {
          let result = response.data;
          self.datas = result.datas;
          self.pageTotal = result.pageTotal;
          self.rowTotal = result.rowTotal;
          if (self.currentPage > self.pageTotal) {
            self.currentPage = self.pageTotal;
          }
          self.$nextTick(function () {
            self.scrollConHeight = self.$refs.tablett.offsetHeight;
            let tds = self.$refs.tr[0].children;
            for (let i = 0; i < tds.length; i++) {
              this.$set(self.theadThWidth, i, tds[i].offsetWidth + 'px');
            }
            self.isShowLoader = false;
          });
        })
        .catch(function (err) {
          self.isShowLoader = false;
          console.log(err);
        });
      }
    },
    mounted: function () {
      this.getPaginitionDatas();
    },
    components: {
      'v-scrollerPosition': scrollerPosition,
      'v-select': select
    }
  };
</script>
<style scoped>
  .pagination-table-wrap{
    position: relative;
    width: 100%;
  }
  .pagination-table-wrap
  .pagination-table-header{
    table-layout: fixed;
    width: 100%;
    height: auto;
    border: 1px solid rgba(166, 201, 226, 1);
  }
  .pagination-table-wrap
  .pagination-table-header th{
    box-sizing: border-box;
    padding: 0 5px;
    border: 1px solid;
    overflow: hidden;
    font-weight: bold;
    line-height: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: linear-gradient(to bottom, rgba(238, 238, 238, 1), rgba(173, 216, 230, 1));
  }

  .pagination-table-wrap
  .pagination-table-header .linear-gbc{
    background: linear-gradient(to bottom, rgba(238, 238, 238, 1), rgba(173, 216, 230, 1));
  }

  .pagination-table-wrap
  .pagination-table{
    width: 100%;
    height: auto;
    border: 1px solid;
    border-top: none;
  }
  .pagination-table-wrap
  .pagination-table th{
    padding: 5px 10px;
    border: 1px solid;
    background-color: rgba(238, 238, 238, 1);
  }
  .pagination-table-wrap
  .pagination-table td{
    box-sizing: border-box;
    padding: 5px 10px;
    border: 1px solid;
  }

  .pagination-table-wrap
  .pagination-table>
  tbody>
  tr:first-child>td{
    border-top: none;
  }

  .pagination-table-wrap
  .pagination-table>
  tbody>
  tr:nth-child(2n){
    background-color: rgba(245, 245, 245, 1);
  }

  .pagination-table-wrap>
  .pagination-table-footer{
    position: relative;
    height: 30px;
    margin-top: 5px;
    /*overflow: hidden;*/
  }

  .pagination-table-wrap>
  .pagination-table-footer>
  div{
    float: left;
  }
  .pagination-table-wrap>
  .pagination-table-footer>
  div>.recordInfo{
    display: inline-block;
    vertical-align: middle;
    user-select: none;
  }
  .pagination-table-wrap>
  .pagination-table-footer>
  ul{
    border: 1px solid rgba(237, 237, 237, 1);
    float: right;
    font-size: 0;
  }
  .pagination-table-wrap>
  .pagination-table-footer>
  ul>li{
    display: inline-block;
    padding: 5px 10px;
    border-right: 1px solid rgba(237, 237, 237, 1);
    font-size: 13px;
    text-align: center;
    user-select: none;
    cursor: pointer;
  }
  .pagination-table-wrap>
  .pagination-table-footer>
  ul>li:last-child{
    border-right: none;
  }
  .pagination-table-wrap>
  .pagination-table-footer>
  ul>.page-num{
    color: rgba(80, 139, 188, 1);
  }
  .pagination-table-wrap>
  .pagination-table-footer>
  ul>.select{
    color: white;
    background-color: rgba(49, 120, 182, 1);
  }
  .pagination-table-wrap>
  .pagination-table-footer>
  ul>.not-allowed{
    cursor: not-allowed;
  }
  .pagination-table-wrap>
  .pagination-table-footer>
  ul>.current-page{
    width: 30px;
    height: 23px;
    padding: 0;
  }
  .pagination-table-wrap>
  .pagination-table-footer>
  ul>.current-page>
  input{
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .pagination-table-wrap>
  .pagination-table-dialog{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(215, 230, 235, 0.5);
  }
  .pagination-table-wrap>
  .pagination-table-dialog>
  .circleGroup{
    position: absolute;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(128, 128, 128, 0.9);
  }
  .pagination-table-wrap>
  .pagination-table-dialog>
  .circleGroup>
  .circle{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    opacity: 1;
    -webkit-animation-name: flashAnimation;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
  }
  @-webkit-keyframes flashAnimation{
    0%{
      opacity: 0.5;
    }
    75%{
      opacity: 1
    }
    100%{
      opacity: 0.5;
    }
  }
  .pagination-table-wrap>
  .pagination-table-dialog>
  .circleGroup>
  .delay-twos{
    -webkit-animation-delay: -0.5s;
  }
  .pagination-table-wrap>
  .pagination-table-dialog>
  .circleGroup>
  .delay-one{
    -webkit-animation-delay: -0.75s;
  }
</style>
